The Problem

So, before we learn about context, we should talk about what problem it solves.

Video Summary

For the most part in this course, we've been learning things in isolation, with 1-4 components. In a large React application, we might have hundreds or even thousands of components. At this sort of scale, new problems emerge.

For example, on this course platform, the course index page has a component structure like this:

Diagram showing how the components are laid out

In my application, I have a user object held in state, fetched from the server. This object includes all the info I need about the currently-logged-in user.

In order to render the ModuleLessons component, I need to know about the current user's progress in the course. Similarly, in order to render the AccountDropdown component, I need some information about the current user.

As we learned in the Lifting State Up lesson, data can only move down in a React app. If I need a piece of state in both the AccountDropdown and the ModuleLessons components, it needs to be housed in the App component.

To get the user state to ModuleLessons, I need to pass it through all of the intermediary components... CourseIndexLayout, CoursePage, etc. That's a lot of trouble!

It means a lot of components will pass the data along without actually using it, like a fire brigade:

function CourseIndexLayout({ user }) {
  return (
    <CoursePage user={user} />
  );
}

In addition to being annoying to wire up, there's a second issue with this: It's hard to maintain.

Let's suppose the design team comes up with a new UI for our product, and now, ModuleLessons lives in a new part of the app:

Diagram showing how the components are laid out, with ModuleLessons moving to be below Hero

We can update Hero so that it renders ModuleLessons and passes the user through, and we can update CourseModuleBlock so that it stops rendering ModuleLessons.

It's so easy to forget to update SubRouteWrapper, though!

I've worked in codebases where, over the course of years, a component element might wind up with 15-16 different props, and only half of them are actually used by the component!

It doesn't cause any bugs or anything, but it adds clutter, and makes our application seem more complicated than it is.

Context is the solution to this problem.

Context is a bit like a Warp Zone in Mario; we can jump straight from World 1 to World 4, skipping the levels in-between.

Another analogy: it's like an express bus service. We can get on the bus at the airport and it'll go straight to a central terminal, skipping all the typical stops in-between.

We'll learn about the syntax in future lessons, but the idea is that a component "provides" state or other data, and any descendant can reach in and pluck out that state/data.

Here's the sandbox from the video, in case you wanted to experience prop-drilling firsthand:

Code Playground

import React from 'react';

import AccountDropdown from './AccountDropdown';

import CourseIndexLayout from './CourseIndexLayout';

function App() {

const user = useUser();

return (

</>

);

}

export default App;

function useUser() {

return {

email: 'hello@hi.com',

};

}